<template>
    <div class="indexPage">

        <Head></Head>
        <div class="tabbox">
            <div class="headSty flex_str">
                <div style="margin-right: 20px;">套餐名称:</div>
                <div class="IptSty">
                    <el-input v-model="rechargeParams.name" @blur="getRechargeList()"></el-input>
                </div>


                <div style="margin-right: 20px;">套餐状态:</div>
                <el-select placeholder="请选择套餐状态" style="margin-right: 40px;width: 120px;"
                    v-model="rechargeParams.status" @change="changeStatus">
                    <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div style="margin-right: 20px;">创建时间:</div>
                <div class="timeSty">
                    <el-config-provider :locale="zhCn">
                        <el-date-picker v-model="pickerTime" type="daterange" range-separator="-"
                            start-placeholder="开始时间" end-placeholder="结束时间" @change="dataPicker" />
                    </el-config-provider>
                </div>
                <div class="creatBtnSty" @click="searchRechargeList()" style="margin-right:20px;">查询</div>
                <div class="creatBtnSty" @click="creadRecharge">新建</div>

            </div>
            <el-table :data="tableData" border stripe style="width: 100%">
                <el-table-column prop="id" label="id" width="190" />
                <el-table-column prop="name" label="套餐名称" width="120" />
                <el-table-column prop="amount" label="套餐金额" width="100" />
                <el-table-column prop="goldCoin" label="充值户币" width="100" />
                <el-table-column prop="description" label="描述信息" />
                <el-table-column prop="expireDate" label="到期时间" width="130" />
                <el-table-column prop="createTime" label="创建时间" width="190" />
                <el-table-column prop="statusName" label="状态" width="70" />
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button link type="primary" size="small" v-if="scope.row.status != '0'"
                            @click="editRecharge(scope.row.id, scope.row)">编辑</el-button>
                        <el-button link type="primary" size="small" @click="adoptFun(scope.row.id)"
                            v-if="scope.row.status != '0'">停用</el-button>
                        <el-button link type="primary" size="small" @click="adoptFun(scope.row.id)"
                            v-if="scope.row.status == '0'">启用</el-button>
                        <el-button link type="primary" size="small" @click="LowerHouse(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer ">
                <el-pagination v-model:current-page="rechargeParams.current" v-model:page-size="rechargeParams.size"
                    :page-sizes="[10, 15, 30, 50, 100]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
    <creatOrEdit v-model="dialog.showCreat" @close="creatOrEditClose"></creatOrEdit>
    <editDialog v-model="dialog.showEdit" :id="rechargeId" :rowData="rowData" @close="EditClose"></editDialog>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from "vue"
import Head from "@/components/head/index.vue";
import { ElTable, ElMessage, ElMessageBox } from 'element-plus'
import creatOrEdit from "./dialog/creatDialog.vue";
import editDialog from "./dialog/editDialog.vue";
import { formatToEndTime, formatDayTime } from '@/utils/moment'
import { getRechargeListApi, operationRechargeApi, delRechargeApi } from '@/api/index/index'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const pickerTime = ref();
const dialog = reactive({
    showCreat: false,
    showEdit: false
})
const rechargeParams = reactive<any>({
    name: '',
    startDate: '',
    endDate: '',
    status: null,
    current: 1,
    size: 10,
})
const total = ref(0)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const statusList = ref([
    {
        label: '全部',
        value: null
    },
    {
        label: '停用',
        value: 0
    }, {
        label: '正常',
        value: 1
    }
])
const tableData = ref<any[]>([])

const rowData = ref<any>()

const rechargeId = ref<any>(null)
const dataPicker = (e: any) => {
    rechargeParams.startDate = formatDayTime(e[0])
    rechargeParams.endDate = formatDayTime(e[1])
    getRechargeList()
}
const handleSizeChange = (val: number) => {
    rechargeParams.size = val
    getRechargeList()
}
const handleCurrentChange = (val: number) => {
    rechargeParams.current = val
    getRechargeList()
}
// 编辑
const editRecharge = (id: number, res: any) => {
    rechargeId.value = id
    rowData.value = res
    dialog.showEdit = true
}
// 禁用
const adoptFun = (id: number) => {

    ElMessageBox.confirm(
        '您确认停用该套餐吗？',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            operationRechargeApi({
                id: id
            }).then((res: any) => {
                if (res.status == 200) {
                    ElMessage({
                        type: 'success',
                        message: '操作成功',
                    })
                    getRechargeList()
                }
            })

        })
        .catch(() => {
        })
}
// 删除用户
const LowerHouse = (id: number) => {
    ElMessageBox.confirm(
        '您确认要删除该套餐吗？删除后用户将不可用!',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            delRechargeApi({
                id: id
            }).then((res: any) => {
                if (res.status == 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getRechargeList()
                }
            })

        })
        .catch(() => {
        })
}
// 创建新的套餐
const creadRecharge = () => {
    dialog.showCreat = true
}
const creatOrEditClose = () => {
    getRechargeList()
    dialog.showCreat = false
}
const EditClose = () => {
    getRechargeList()
    dialog.showEdit = false
}
const searchRechargeList = () => {
    if (rechargeParams.name == '') {
        ElMessage.warning('请输入套餐名称')
    } else {
        getRechargeList()
    }
}
const getRechargeList = () => {
    getRechargeListApi(rechargeParams).then((res: any) => {
        tableData.value = res.data.records
        total.value = res.data.total
    })
}
const changeStatus = (num: any) => {
    rechargeParams.status = num;
    getRechargeList()
}


onMounted(() => {
    getRechargeList()
})

</script>
<style scoped>
.creatBtnSty {
    padding: 6px 20px;
    background-color: #409EFE;
    color: #fff;
    border-radius: 6px;
}

.footer {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 20px;
}

.headSty {
    margin-bottom: 20px;
}

.IptSty {
    width: 140px;
    margin-right: 50px;
}

.timeSty {
    width: 450px;

}

.searchBtnSty {
    padding: 4px 25px;
    color: #fff;
    background-color: #409EFE;
    border-radius: 10px;
}

.indexPage {
    height: 100%;
}

.tabbox {
    width: 1560px;
    height: 87%;
    border-radius: 10px;
    padding: 20px;
}
</style>
